<html style="font-size: 56.6px;">
<head>
    <meta charset="utf-8">
    <title>日照园区大屏</title>
	<link rel="stylesheet" href="../static/css/bootstrap.min.css">
<!--	<link rel="stylesheet" href="../static/css/jsgrid.min.css"/>-->
<!--	<link rel="stylesheet" href="../static/css/jsgrid-theme.min.css"/>-->
<!--	<link rel="stylesheet" href="https://unpkg.com/gridjs/dist/theme/mermaid.min.css">-->
	<link rel="stylesheet" href="../static/css/visualizedCharts.css"/>
	<link rel="stylesheet" href="../static/css/numbercss.css"/>

</head>
	<!--前端页面，动静分离，css与html分离，本html只对页面布局起作用，eccharts组件单独调用js文件，样式表调用bootstrap css-->
<body class="contains" style="font-size: 56.6px;">
	<div class="header">
	<div class = "title" >日照园区运维监控平台</div>
	<div id = "time" >当前时间：<label></label></div>
	</div>
	<div class="container">
		<div class="row">
			<div class="col-md-4 item_left">
				<div class="item_left_content">
					<div class="cpuChartDiv">
						<div class="border">
							<div id="cpuBar"></div>
						</div>
					</div>
					<div class="memChartDiv" >
						<div class="border">
							<div id="memBar"></div>
						</div>
					</div>
					<div class="diskChartDiv">
						<div class="border">
								<div id="diskBar"></div>
						</div>
					</div>
				</div>
			</div>
			<div class="col-md-4 item_center">
				<div class="item_center_content">
					<div class="totalInfoDiv">
						<div class="border" style="height: 70px;padding: 7px 0px;margin-top: -9px;">
							<div class="col-md-6 light" style="border-right: 1px solid #02a6b5;"><div id="daytotal" class="digits" style="color:#fff;">88</div></div>
							<div class="col-md-6 light"><div id="dayresolve" class="digits">8888</div></div>
						</div>
						<div style="clear:both; margin-top: 10px;">
							<span  class="col-md-6" style="color:#fff;display: inline-block;font-size:18px;text-align: center;padding-left: 10px;padding-right: 10px;">今日工单数量（单）</span>
							<span class="col-md-6"  style="color:#fff;display: inline-block;font-size:18px;text-align: center;padding-left: 10px;padding-right: 10px;">当日解决数量（单）</span>
						</div>
					</div>
					<div class="totalInfoDiv2">
						<div class="border" style="height: 70px;padding: 7px 0px;margin-top: -9px;">
							<div class="col-md-6 light" style="border-right: 1px solid #02a6b5;"><div id="montotal" class="digits" style="color:#fff;">88</div></div>
							<div class="col-md-6 light"><div id="monresolve" class="digits">8888</div></div>
						</div>
						<div style="clear:both; margin-top: 10px;">
							<span  class="col-md-6" style="color:#fff;display: inline-block;font-size:18px;text-align: center;padding-left: 10px;padding-right: 10px;">当月工单数量（单）</span>
							<span class="col-md-6"  style="color:#fff;display: inline-block;font-size:18px;text-align: center;padding-left: 10px;padding-right: 10px;">当月解决数量（单）</span>
						</div>
					</div>					
					<div class="totalInfoDiv3">
						<div class="border" style="height: 70px;padding: 7px 0px;margin-top: -9px;">
							<div class="col-md-6 light" style="border-right: 1px solid #02a6b5;"><div id="lowgrademonth" class="digits" style="color:#fff;">88</div></div>
							<div class="col-md-6 light"><div id="highgradepermon" class="digits">8888</div></div>
						</div>
						<div style="clear:both; margin-top: 10px;">
							<span  class="col-md-6" style="color:#fff;display: inline-block;font-size:18px;text-align: center;padding-left: 10px;padding-right: 10px;">当月差评工单（单）</span>
							<span class="col-md-6"  style="color:#fff;display: inline-block;font-size:18px;text-align: center;padding-left: 10px;padding-right: 10px;">当月满意率（%）</span>
						</div>
					</div>
					<div class="totalInfoDiv4">
						<div class="border" style="height: 70px;padding: 7px 0px;margin-top: -9px;">
							<div class="col-md-6 light" style="border-right: 1px solid #02a6b5;"><div id="commentpermon" class="digits" style="color:#fff;">88</div></div>
							<div class="col-md-6 light"><div id="resolvepermon" class="digits">8888</div></div>
						</div>
						<div style="clear:both; margin-top: 10px;">
							<span  class="col-md-6" style="color:#fff;display: inline-block;font-size:18px;text-align: center;padding-left: 10px;padding-right: 10px;">当月评价率（%）</span>
							<span class="col-md-6"  style="color:#fff;display: inline-block;font-size:18px;text-align: center;padding-left: 10px;padding-right: 1px;">当月及时解决率（%）</span>
						</div>
					</div>

				</div>
			</div>
			<div class="col-md-4 item_right">
				<div class="item_right_content">
					<div class="netChartDiv">
						<div class="border">
							<div id="netBar"></div>
						</div>
					</div>

					<!--div-- class="dutyChatDiv" >
						<div class="border1">
							<div id="dutytile">日照运营技术科公告信息<label></label></div>
							<div id="duty" style="overflow:hidden;padding-left: 20px;padding-right: 20px;">
								<a href='/dutylist/'>今日出勤人员</br></a>
								<div id="mon"><label></label></div>
								<a href='/equiplist/'>IT资产库存</br></a>
								<div id="equip"><label></label></div>
							</div>
						</div>
					</div-->
					<div class="dbChartDiv">
						<div class="border">
							<div id="dbBar">
								<!--table border="1" cellpadding="0" cellspacing="0">
									<tr>
										<td>主机名</td>
										<td>实例状态</td>
										<td>监听状态</td>
										<td>业务表空间使用率</td>
										<td>临时表空间使用率</td>
									</tr>
									<tr>
										<td id="hostname"></td>
										<td id="instanceStatus"></td>
										<td id="lsnrStatus"></td>
										<td id=tbsUsage"></td>
										<td id="tempTbsUsage"></td>
									</tr>
								</table-->
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>

   <!--设计画图
   /*function get_cpu_usage() {
            $.ajax({
                cache: false,
                type: "GET",
                url: "/get_cpu_usage", //把表单数据发送到/viewdata
                data: {}, // 发送的数据，这里是前端接收数据，所以是空
                dataType : "json",  //返回数据形式为json
                async: false,
                error: function(request) {
                    alert("发送请求失败！");
                },
                success: function(apps) {
                    myChart.hideLoading(); // 隐藏加载动画
                    myChart.setOption({
                    title: {
                        text: '资源监控demo'
                    },
                    tooltip: {},
                    legend: {
                        //data:['cpu占用率']
                    },
					grid: {
				    	y2: 140,
						containLabel: false
				    },
                    xAxis: {
                        data: apps.hostname,
						axisLabel:{
						     interval:0,//横轴信息全部显示
						     rotate:-30,//-30度角倾斜显示
						}
                    },
                    yAxis: {},
                    //
                    series: [{
                        name: 'cpu占用率',
                        barWidth:50,
						type: 'bar',
                        data: apps.value,
						itemStyle: {
							normal: {
								label: {
									show: true,		//开启显示
									position: 'top',	//在上方显示
									textStyle: {	    //数值样式
										color: 'black',
										fontSize: 16
										}
									},							
								color:function(params){
									if(params.value >20){
										return "red";
										}
									return "blue";
									}
								}	
							}
						}]
					});
                }
            });
        };
		function get_mem_usage() {
            $.ajax({
                cache: false,
                type: "GET",
                url: "/get_mem_usage", //把表单数据发送到/viewdata
                data: {}, // 发送的数据，这里是前端接收数据，所以是空
                dataType : "json",  //返回数据形式为json
                async: false,
                error: function(request) {
                    alert("发送请求失败！");
                },
                success: function(apps) {
                    myChart2.hideLoading(); // 隐藏加载动画
                    myChart2.setOption({
                    tooltip: {},
                    legend: {
                        //data:['内存占用率']
                    },
					grid: {
				    	y2: 140
				    },
                    xAxis: {
                        data: apps.hostname,
						axisLabel:{
						     interval:0,//横轴信息全部显示
						     rotate:-30,//-30度角倾斜显示
						}
                    },
                    yAxis: {},
                    //
                    series: [{
                        name: '内存占用率',
                        barWidth:50,
						type: 'bar',
                        data: apps.value,
						itemStyle: {
							normal: {
								label: {
									show: true,		//开启显示
									position: 'top',	//在上方显示
									textStyle: {	    //数值样式
										color: 'black',
										fontSize: 16
                           }
                       }
                   }
				}
                    }]
                    });
                }
            });
        };
		function get_disk_usage() {
            $.ajax({
                cache: false,
                type: "GET",
                url: "/get_disk_usage", //把表单数据发送到/viewdata
                data: {}, // 发送的数据，这里是前端接收数据，所以是空
                dataType : "json",  //返回数据形式为json
                async: false,
                error: function(request) {
                    alert("发送请求失败！");
                },
                success: function(apps) {
                    myChart3.hideLoading(); // 隐藏加载动画
                    //console.log(result);
                    myChart3.setOption({
                    tooltip: {},
                    legend: {
                        //data:['硬盘占用率']
                    },
					grid: {
				    	y2: 140
				    },
                    xAxis: {
                        data: apps.hostname,
						axisLabel:{
						     interval:0,//横轴信息全部显示
						     rotate:-30,//-30度角倾斜显示
						}
                    },
                    yAxis: {},
                    //
                    series: [{
                        name: '硬盘占用率',
                        barWidth:50,
						type: 'bar',
                        data: apps.value,
						itemStyle: {
							normal: {
								label: {
									show: true,		//开启显示
									position: 'top',	//在上方显示
									textStyle: {	    //数值样式
										color: 'black',
										fontSize: 16
                           }
                       }
                   }
				}
                    }]
                    });
                }
            });
        };
   window.setInterval(function(){
        get_cpu_usage();
		get_mem_usage();
		get_disk_usage()
   },60000);-->

</body>
<script src="../static/js/jquery-1.11.1.min.js"></script>
<script src="../static/js/echarts.min.js"></script>
<script src="../static/js/bootstrap.min.js"></script>
<!--<script src="../static/js/jsgrid.min.js"></script>-->
<!--<script src="https://unpkg.com/gridjs/dist/gridjs.production.min.js"></script>-->
<!--<script src="../static/js/jquery.numscroll.js"></script>-->
<script src="../static/js/visualizedCharts.js"></script>
<!--<script src="../static/js/table.js"></script>-->

</html>

